<template>
  <div class="stock">
    <span style="font-size: 18px">{{ title }}</span>
    <div
      style="
        background: #fff;
        border-radius: 8px;
        height: 82vh;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
      "
    >
      <div style="padding: 20px">
        <el-input
          style="width: 200px; margin-right: 10px"
          v-model="searchtext"
          placeholder="搜索发布者"
        ></el-input>
        <el-button type="primary" @click="search()">搜索</el-button>
        <el-date-picker
          style="margin-left: 20px"
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <el-button type="primary" style="margin-left: 40px;" @click="batch()"
          >批量审核</el-button
        >
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="编号"
            width="100"
            prop="nmb"
          ></el-table-column>
          <el-table-column label="发布时间" width="180">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="发布者" width="120">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="320">
          </el-table-column>
          <el-table-column prop="class" label="视频类别" width="200">
          </el-table-column>
          <el-table-column
            prop="tag"
            label="状态"
            width="100"
            :filters="[
              { text: '未审核', value: 'ten' },
              { text: '已通过', value: 'fan' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.tag === '未审核' ? 'primary' : 'success'"
                disable-transitions
                >{{ scope.row.tag }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >审核</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block2">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
      </div>
      <div class="dio">
        <el-dialog
          title="审核"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
        <iframe :src="video_url" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="qd()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "视频管理",
      dialogVisible: false,
      options: [
        {
          value: "拒绝",
          lable: "ju",
        },
        {
          value: "通过",
          lable: "tg",
        },
      ],
      video_url:"//player.bilibili.com/player.html?aid=16060399&bvid=BV1ax411j7yg&cid=26211533&page=1",
      temp_video:[],
      value: "",
      pickerOptions: {
        //日期选择
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      currentPage: 1, //默认页
      pageSize: 7,
      tableData: [],
      restaurants: [],
      searchtext: "",
    };
  },
  methods: {
    select() {
      this.$axios
        .get("http://43.142.118.44/backstorg/video.php", {})
        .then((res) => {
          this.tableData = res.data;
          console.log(res.data);
          for(let i = 0;i < res.data.length;i++){
            res.data[i].video_url = this.temp_video
          }
          console.log(res.data[0].video_url)
        });
    },
    search() {
      //搜索
      if (this.searchtext !== "") {
        this.$axios
          .get("http://43.142.118.44/backstorg/searchvideo.php", {
            params: {
              name: this.searchtext,
            },
          })
          .then((res) => {
            this.tableData = res.data;
            console.log(res.data);
          });
      } else {
        this.$message.error("请输入您要搜索的关键字");
      }
    },
    //审核
    handleEdit(index, row) {
      this.dialogVisible = true;
      console.log(index, row);
      
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("确定要删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get(
              `http://43.142.118.44/backstorg/delvideo.php?nmb=${row.nmb}`,
              {}
            )
            .then((res) => {
              if (res.data == "true") {
                this.select();
                this.$message.success("删除成功");
              } else {
                this.$message.error("服务器响应超时");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量审核
    batch() {
      this.dialogVisible = true;
    },
    qd() {
      //审核确认
      console.log(this.options);
      this.dialogVisible = false;
      this.$message({
        showClose: true,
        message: "操作成功",
        type: "success",
      });
    },
    toggleSelection(rows) {
      //标签
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    handleSelect(item) {
      console.log(item);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  mounted() {
    this.select();
  },
};
</script>
<style>
.stock {
  padding: 30px;
  background: #f0f2f5;
  height: 93vh;
  overflow-y: scroll;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.block2 {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
* {
  caret-color: rgba(0, 0, 0, 0);
}
</style>
